<template>
  <div>
    <mt-header style="background-color:#ff4d4f;color:#fff" fixed title="更改密码">
      <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="main">
      <div class="from">
        <span>原密码:</span>
        <input class="user" v-model="pwd" placeholder="原密码" type="text" />
        <span>新密码:</span>
        <input class="pwd" v-model="new_pwd" placeholder="新密码" type="text" />
      </div>
      <div class="footer">
        <mt-button class="btn" @click="set" type="danger">确定</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../utils/http.js";
import CryptoJS from "crypto-js";
export default {
  data() {
    return {
      token: "",
      new_pwd: "",
      pwd: ""
    };
  },
  methods: {
    set() {
      var strCiphertext = "";
      var newstrCiphertext = "";
      var key = CryptoJS.enc.Utf8.parse("26567E43738a8F91)E4E34e8D6E1E28A");
      var iv = CryptoJS.enc.Utf8.parse("3d03AD3F-2Ac26A2");
      var encrypted = CryptoJS.AES.encrypt(this.pwd, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      var newencrypted = CryptoJS.AES.encrypt(this.new_pwd, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      strCiphertext = encrypted.ciphertext.toString(); //密文
      newstrCiphertext = newencrypted.ciphertext.toString();
      https({
        method: "post",
        url: "/api/v1/Systems/ModifyPWD",
        data: {
          OldPWD: strCiphertext,
          NewPWD: newstrCiphertext
        }
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            Toast({
              message: "修改成功",
              iconClass: "icon icon-success"
            });
            localStorage.setItem("token", "");
            this.$router.push("/login");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #fff;
  padding-top: 4.5rem;
  box-sizing: border-box;
  .from {
    width: 95%;
    margin: 0 auto;
    span {
      margin-left: 5.5%;
    }
    .user {
      width: 70%;
      height: 2.5rem;
      border-radius: 5px;
      margin-left: 3%;
      border-bottom: 1px solid #eee;
      text-indent: 1em;
      box-sizing: border-box;
    }
    .pwd {
      width: 70%;
      height: 2.5rem;
      border-radius: 5px;
      margin-left: 3%;
      border-bottom: 1px solid #eee;
      margin-top: 1rem;
      text-indent: 1em;
      box-sizing: border-box;
    }
  }
  .footer {
    width: 100%;
    padding-top: 2rem;
    box-sizing: border-box;
    .btn {
      width: 85%;
      margin-left: 7.5%;
      background: #ff4d4f;
    }
  }
}
</style>